<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位属性</title>
		<style>
			/* div宽高一致300px*300px，圆，文本放大：10em，垂直居中
			每个圆添加一个颜色
			*/
		   div{
			   width: 300px;
			   height: 300px;
			  border-radius: 50%;
			  font-size: 10em;
			  text-align: center;
			  line-height: 300px;
			  color: #fff;
			  /* 网页阴影：①滤镜：下阴影 ②文本阴影 ③盒子阴影*/
			  /* 属性值：X  Y模糊半径阴影半径 颜色 内外阴影 inset*/
			  box-shadow: 5px 5px 30px 30px #ffd4fa inset;
			  /* 浮动定位：float属性：none/left/right;*/
			   float: left;
			   /* clear清除浮动：left/right/both;*/
		   }
		   div.d1{
			   background-color: #ffff7f;
		   }
		    div.d2{
		   		background-color: #00ffff;
		   		   }
			div.d3{
			 background-color: #ff55ff;
			 /* clear清除浮动：left/right/both;直接作用在浮动的元素上*/
			}
			 div.d4{
			background-color: #ff557f;
			   }
			 div.d5{
			   background-color: #aaff7f ;
			   }						  
		</style>
	</head>
	<body>
		<!-- 什么是定位？页面元素通过“定位方式”指定具体位置
		 定位方式5种：①普通流定位/文档流定位：页面元素分为；块、行、行内元素，按照元素特点定位元素
		             ②浮动定位:页面上左右布局，可以让元素飘起来，飘起来的元素转成块元素
					 ③相对定位：相对于父级元素相对定位，没有父级，按照body定位
					           元素不脱离文档流
					 ④绝对定位：相对于父级元素进行定位，没有父级，按照页面左顶角定位
					           元素脱离文档流
						堆叠属性z-index属性:属性值：999
					 ⑤固定定位：广告接口固定在页面右下角，position：fiexd；
		 -->
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
        <div class="d4">4</div>
        <div class="d5">5</div>
	</body>
</html>